<template>
	<div id="add">
	    <ul class="list-group">
	    	<li class="list-group-item">
	    		姓名<input class="mustInput" type="text" name="name"  placeholder="必填" v-model="personnel.name" />
	    	</li>
	    	<li class="list-group-item sex custom-checkbox">
	    		性别<input type="radio" name="sex" value="1"  v-model="personnel.sex" />
        			<label>男</label>
        			<input type="radio" name="sex" value="2" v-model="personnel.sex" />
        			<label>女</label>
	    	</li>
	    	<li class="list-group-item">
	    		年龄<input class="mustInput" type="number" name="age" placeholder="请填写真实年龄" v-model="personnel.age" />
	    	</li>
	    	<li class="list-group-item">
	    		手机<input class="mustInput" type="number" name="tell"  value="" placeholder="请输入手机号码" v-model="personnel.phone" />
	    	</li>
	    	<li class="list-group-item">学科
	    		<div class="styled-select-add">
            		<span class="pull-right required xia">
            			<img src="../assets/xia.png"/>
            		</span>
	            	<select class="xk" v-model="personnel.subject" name="subject">
	            		<option v-for="(item,index) in subjectdata">{{item.name}}</option>
	            	</select>
	            </div>
	    	</li>
	    	<li class="list-group-item">是否坐班
		    	<span class="pull-right required switch">
		    		<my-switch  size="lg" on-label="foo" off-label="bar" on-value="1" off-value="2" v-model="personnel.is_class" ></my-switch> 
		    	</span>
		    </li>
	    	<li class="list-group-item">
	    		<span class="tedian">特点</span>
	    		<textarea name="characteristic" placeholder="请填写特点" v-model="personnel.characteristic"></textarea>
	    	</li>
	    	<li class="list-group-item">
	    		<span class="tedian">喜好</span>
	    		<textarea name="characteristic" placeholder="请填写喜好" v-model="personnel.like"></textarea>
	    	</li>
	    </ul>
		<!--按钮-->
        <div v-if="this.$route.params.index >= 0">
            <button type="button" @click="del()" class="btn btn-primary btn-lg btn-block del">删除</button>
			<button type="button" @click="add(personnel,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
        </div>
        <div v-else>
			<div v-if="this.$route.params.role > 1">
            	<button type="button" @click="add(personnel,2)" class="btn btn-primary btn-lg btn-block little">保存并继续添加</button>
				<button type="button" @click="add(personnel,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
			</div>
			<div v-else>
				<button type="button" @click="add(personnel,1)" class="btn btn-primary btn-lg btn-block">保存</button>
			</div>
        </div>

		<!--按钮end-->
	</div>
</template>

<script>
import 'babel-polyfill'
import mySwitch from 'vue-switch/switch-2.vue'
/* eslint-disable */
export default {
  name: 'add',
  components: {
  	'my-switch': mySwitch
  },
  computed: {
    personnel () {
	    return this.$store.state.system.personnel
    },
    subjectdata () {
	    return this.$store.state.system.subjectdata
    }
  },
  created () {
    this.init()  //初始化
  },
  watch: {
      '$route': 'init'
  },
  methods:{
    init() {
        //判断是否是添加
        if(this.$route.params.index >= 0) {
            this.$store.state.system.personnel = this.$store.state.system.personnelArray[this.$route.params.index];
            let role = this.$store.state.system.personnel.role - 1
            this.$store.state.system.title =  this.$store.state.system.content[role].editTitle
        }else{
            this.empty()//添加成功数据清空
            let role = this.$route.params.role - 1
            this.$store.state.system.title =  this.$store.state.system.content[role].title
        }
    },
    del() {
        //添加
        if(this.$store.state.system.personnel.role == 1)
        {
            this.$store.state.system.principal = false;
        }
        this.$store.state.system.personnelArray.splice(this.$route.params.index,1)
        this.$router.go(-1)
    },
  	add(param,status) {
        if(this.$route.params.gradeId)
        {
            param.grade_id = this.$route.params.gradeId
        }

        if(this.$route.params.classId)
        {
            param.class_id = this.$route.params.classId
        }

        let row = this.checkData(param)
		if(row.status == 1)
		{
            layer.open(row.msg);
		    return false;
		}
		//添加   修改 校长
        if(this.$route.params.role == 1)
        {
            this.$store.state.system.principal = true;
        }

		if(this.$route.params.index >= 0)
        {
            //修改
            this.$store.state.system.personnelArray[this.$route.params.index] = param
        }else{
            param.role = this.$route.params.role
            this.$store.state.system.personnelArray.push(param)
        }
        layer.open(row.msg);
        this.empty()//添加成功数据清空
        if(status == 1) {
            this.$router.go(-1)
        }
  	},
	empty() {  //清空数据
        this.$store.state.system.personnel = {
            school_id: null,//学校ID
            grade_id: null,//年级ID
            class_id: null,//班级ID
            role: null, //角色,
            name:'',//姓名
            sex:1,//性别
            age:'',//年龄
            phone:'',//手机
            subject: null,//所教学科
            is_class:2,//是否坐班
            characteristic:'',//特点
            like:'',//喜好
        }
	},
    checkData(param) {
    	if(param.name == ""){
            return { status: 1, msg: {content: '请填写姓名！', skin: 'msg', time: 2 }}
        }
    	var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
        if(!reg.test(param.name)){
            return { status: 1, msg: {content: '请填写真实姓名！', skin: 'msg', time: 2 }}
        }
        if(param.age == ""){
            return { status: 1, msg: { content: '请填写年龄！', skin: 'msg', time: 2 }}
        }
        if(param.age.length > 3){
            return { status: 1, msg: { content: '请填写正确年龄！', skin: 'msg', time: 2 }}
        }
        if(param.phone == ""){
            return { status: 1, msg: { content: '请填写手机号码！', skin: 'msg', time: 2 }}
        }
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/
        if(!myreg.test(param.phone)){
        	 return { status: 1, msg: { content: '请填写正确的手机格式', skin: 'msg', time: 2 }}
        }
        return { status: 0, msg: { content: '添加成功！', skin: 'msg', time: 2 }};
	}
  }
}
</script>

<style>
	*{
		outline: none;
	}
	/*.header-title{
		margin-left: 0;
		color: #fff;
	}
	div.top-bar{
		background-color: #4a77b0;
	}
	.cancel,.save{
		color: #fff;
	}
	a:link {color: #fff;text-decoration: none;} 
	a:visited {color: #fff;text-decoration: none;} 
	a:hover {color: #fff;text-decoration: none;} 
	a:active {color: #ccc;text-decoration: none;} */
	.mustInput{
		text-indent: 1em;
	}
	button.little{
		width: 40%;
		float: left;
		margin-left: 0.5rem;
		padding: 0.15rem;
		background-color: #4a77b0;
		border: none!important;
	    outline: none!important;
	    font-size: 0.3rem;
	}
	button.btn-block{
		margin-top: 0.5rem;
	}
	.btn-block + .btn-block{
		margin-top: 0.5rem;
	}
	.btn:focus{
		background-color: #4a77b0;
		outline: none;
	}
	.xk{
 		border: none;
 		outline: none;
 		color: #b0b0b0;
 		font-size: 0.3rem;
 		width: 5rem;
 		height: 0.5rem;
 		background-color: #fff;
 		padding: 0 0 0.05rem 0;
      	-webkit-appearance: none; /*for chrome*/
      	text-indent: 14.5em;
 	}
 	select::expand { display: none; }
 	.right img{
 		width: 0.14rem;
 		height: 0.24rem;
 	}
 	.styled-select-add {
 		display: inline;
	    width: 1.4rem;
	    height: 0.5rem;
	    overflow: hidden;
	    /*margin-left: 4.5rem;*/
	}
	li{
		overflow: hidden;
	}
	textarea{
		width: 5rem;
		float: left;
		/*overflow-x: hidden;
		overflow-y: hidden;*/
		resize: none;
		display: block;
		margin-left: 0.3rem;
		border: none;
	}
	.tedian{
		/*position: absolute;*/
		float: left;
	}
	button.del{
		width: 40%;
		background-color: #f25151;
		border: 1px solid #f25151;
		float: left;
		height: 0.7rem;
		padding: 0;
		margin-left: 0.5rem;
	}
	.del:active{
		background-color: #f25151!important;
		border: 1px solid #f25151!important;
	}
	.xia img{
		width: 0.32rem;
		height: 0.32rem;
	}
	.xia{
		margin-right: -0.1rem;
	}
	.custom-checkbox input[type="radio"] {
        -webkit-appearance: none;
        height: 0.32rem;
        vertical-align: sub;
        width: 0.32rem;
        outline: none;
    }
    .custom-checkbox input[type="radio"]:checked {
        background: url(../assets/gou.png) no-repeat;
        background-size:100% 100%;
    }
    .custom-checkbox input[type="radio"]:not(:checked) {
        background: url(../assets/nogou.png) no-repeat;
        background-size:100% 100%;
    }
    .custom-checkbox input{
        margin-left: 0.3rem;
        border: none;
    }
    .switch{
		margin-top: -0.04rem;
	}
</style>